<template>
  <div class="list">
    <div class="articleList" @scroll="handleScroll" ref="scrollContainer">
      <van-empty description="暂无数据" v-if="list.length === 0" />

      <div
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="$router.push('/detail' + '?id=' + item.id)"
      >
        <div class="top">
          <!-- <div class="left">1</div> -->
          <img :src="item.avatar" alt="" />
          <div class="right">
            <div class="title">{{ item.stem }}</div>
            <div class="username">
              <span>{{ item.creator }}</span>
              <span>|</span>
              <span>{{ item.createdAt }}</span>
            </div>
          </div>
        </div>
        <div class="middle" v-html="item.content"></div>
        <div class="bottom">
          <span>点赞 {{ item.likeCount }}</span>
          <span>|</span>
          <span>浏览 {{ item.views }}</span>
        </div>
      </div>

      <div class="load-more" v-if="loading">加载中...</div>
      <div class="load-more" v-if="finished">没有更多了</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleList",

  data() {
    return {
      startY: 0,
    };
  },
  props: {
    list: {
      type: [],
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
    finished: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const { scrollTop, clientHeight, scrollHeight } =
        this.$refs.scrollContainer;
      // console.log(scrollTop, clientHeight, scrollHeight);
      if (
        scrollTop + clientHeight >= scrollHeight - 10 &&
        !this.loading &&
        !this.finished
      ) {
        this.onLoad();
      }
    },

    onLoad() {
      this.$emit("onLoad");
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.articleList {
  overflow-y: auto;
}
.item {
  border: (1 / @vw) solid #000;
  padding: (10 / @vw);
  margin: (10 / @vw);
  .top {
    display: flex;

    img {
      width: (50 / @vw);
      height: (50 / @vw);
      border-radius: 50%;
    }

    .right {
      flex: 1;
    }
  }
}
// 超过两行显示省略号
.middle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>